<template>
  <div id="favourQuestionsView">
    <a-card class="questionList">
      <a-table
        :ref="tableRef"
        :columns="columns"
        :data="dataList"
        :pagination="{
          showTotal: true,
          hideOnSinglePage: true,
          total,
        }"
        :bordered="{ wrapper: true, cell: true }"
        stripe
      >
        <template #extent="{ record }">
          <a-tag v-if="record.extent === '简单'" color="#00af9b"> 简单 </a-tag>
          <a-tag v-if="record.extent === '中等'" color="#ffb800"> 中等 </a-tag>
          <a-tag v-if="record.extent === '困难'" color="#ff2d55"> 困难 </a-tag>
        </template>
        <template #tags="{ record }">
          <a-space>
            <a-tag
              v-for="(tag, index) of record.tags"
              :key="index"
              size="small"
              bordered
            >
              {{ tag }}
            </a-tag>
          </a-space>
        </template>
        <template #optional="{ record }">
          <a-tooltip position="bottom" content="做题" mini>
            <icon-find-replace
              class="operate"
              @click="toQuestionPage(record)"
              :style="{ fontSize: '18px' }"
            />
          </a-tooltip>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import {
  IconFindReplace,
  IconCheckCircle,
  IconMinusCircle,
  IconCloseCircle,
  IconTags,
} from "@arco-design/web-vue/es/icon";
import { Message, TableSortable } from "@arco-design/web-vue";
import "@arco-design/web-vue/es/message/style/css.js";
import {
  Question,
  QuestionVO,
  BaseResponse_List_QuestionVO_,
  QuestionControllerService,
  QuestionQueryRequest,
} from "../../../generated";
import { ref, onMounted, watch, watchEffect, computed } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
const store = useStore();
const tableRef = ref();
const dataList = ref([] as QuestionVO[]);
const total = ref(0);
const title = ref<string>();
const extent = ref("全部");
const tags = ref<string[]>([]);

const loadData = async () => {
  store.commit("loading/showLoading", true);
  const res = await QuestionControllerService.getFavourQuestionListUsingGet();
  if (res.code === 0) {
    res.data?.forEach((item: any) => {
      item.extent = item.tags.shift();
    });
    dataList.value = res.data || [];
    console.log(dataList.value);
    total.value = res.data?.length || 0;
  } else {
    Message.error("加载失败" + res.message);
  }
  store.commit("loading/showLoading", false);
};
/**
 * 页面加载时，请求数据
 */
onMounted(() => {
  loadData();
});

const columns = [
  {
    title: "题目",
    dataIndex: "title",
  },
  {
    title: "标签",
    slotName: "tags",
  },
  {
    title: "难度",
    slotName: "extent",
  },
  {
    title: "操作",
    slotName: "optional",
  },
];

const router = useRouter();

/**
 * 跳转到做题页面
 * @param question
 */
const toQuestionPage = (question: Question) => {
  router.push({ path: `/view/question/${question.id}` });
};
</script>

<style scoped>
:deep(.arco-table-th.arco-table-col-sorted) {
  background-color: #0a65cc;
}
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
#favourQuestionsView {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
}
.divider {
  margin: 10px 0 20px 0;
}
.questionList {
  flex: 1;
  width: 70vh;
  margin-right: 8px;
}
.progress {
  width: 250px;
  height: 150px;
}

.searchParams {
  display: flex;
}
.operate {
  cursor: pointer;
}
.random {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding-bottom: 10px;
}
.random-text {
  display: inline-block;
  transform: rotate(0.61deg);
  color: rgb(10, 101, 204);
  font-family: 思源黑体;
  font-size: 14px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: 0;
  text-align: left;
  margin-left: 10px;
  margin-right: 25px;
}
</style>
